<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>var __ez=__ez||{};__ez.stms=Date.now();__ez.evt={};__ez.script={};__ez.ck=__ez.ck||{};__ez.template={};__ez.template.isOrig=false;__ez.queue=function(){var e=0,i=0,t=[],n=!1,o=[],r=[],s=!0,a=function(e,i,n,o,r,s,a){var l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,d=this;this.name=e,this.funcName=i,this.parameters=null===n?null:p(n)?n:[n],this.isBlock=o,this.blockedBy=r,this.deleteWhenComplete=s,this.isError=!1,this.isComplete=!1,this.isInitialized=!1,this.proceedIfError=a,this.fWindow=l,this.isTimeDelay=!1,this.process=function(){f("... func = "+e),d.isInitialized=!0,d.isComplete=!0,f("... func.apply: "+e);var i=d.funcName.split("."),n=null,o=this.fWindow||window;i.length>3||(n=3===i.length?o[i[0]][i[1]][i[2]]:2===i.length?o[i[0]][i[1]]:o[d.funcName]),null!=n&&n.apply(null,this.parameters),!0===d.deleteWhenComplete&&delete t[e],!0===d.isBlock&&(f("----- F'D: "+d.name),u())}},l=function(e,i,t,n,o,r,s){var a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,l=this;this.name=e,this.path=i,this.async=o,this.defer=r,this.isBlock=t,this.blockedBy=n,this.isInitialized=!1,this.isError=!1,this.isComplete=!1,this.proceedIfError=s,this.fWindow=a,this.isTimeDelay=!1,this.isPath=function(e){return"/"===e[0]&&"/"!==e[1]},this.getSrc=function(e){return void 0!==window.__ezScriptHost&&this.isPath(e)&&"banger.js"!==this.name?window.__ezScriptHost+e:e},this.process=function(){l.isInitialized=!0,f("... file = "+e);var i=this.fWindow?this.fWindow.document:document,t=i.createElement("script");t.src=this.getSrc(this.path),!0===o?t.async=!0:!0===r&&(t.defer=!0),t.onerror=function(){var e={url:window.location.href,name:l.name,path:l.path,user_agent:window.navigator.userAgent};"undefined"!=typeof _ezaq&&(e.pageview_id=_ezaq.page_view_id);var i=encodeURIComponent(JSON.stringify(e)),t=new XMLHttpRequest;t.open("GET","//g.ezoic.net/ezqlog?d="+i,!0),t.send(),f("----- ERR'D: "+l.name),l.isError=!0,!0===l.isBlock&&u()},t.onreadystatechange=t.onload=function(){var e=t.readyState;f("----- F'D: "+l.name),e&&!/loaded|complete/.test(e)||(l.isComplete=!0,!0===l.isBlock&&u())},i.getElementsByTagName("head")[0].appendChild(t)}},d=function(e,i){this.name=e,this.path="",this.async=!1,this.defer=!1,this.isBlock=!1,this.blockedBy=[],this.isInitialized=!0,this.isError=!1,this.isComplete=i,this.proceedIfError=!1,this.isTimeDelay=!1,this.process=function(){}};function c(e){!0!==h(e)&&0!=s&&e.process()}function h(e){if(!0===e.isTimeDelay&&!1===n)return f(e.name+" blocked = TIME DELAY!"),!0;if(p(e.blockedBy))for(var i=0;i<e.blockedBy.length;i++){var o=e.blockedBy[i];if(!1===t.hasOwnProperty(o))return f(e.name+" blocked = "+o),!0;if(!0===e.proceedIfError&&!0===t[o].isError)return!1;if(!1===t[o].isComplete)return f(e.name+" blocked = "+o),!0}return!1}function f(e){var i=window.location.href,t=new RegExp("[?&]ezq=([^&#]*)","i").exec(i);"1"===(t?t[1]:null)&&console.debug(e)}function u(){++e>200||(f("let's go"),m(o),m(r))}function m(e){for(var i in e)if(!1!==e.hasOwnProperty(i)){var t=e[i];!0===t.isComplete||h(t)||!0===t.isInitialized||!0===t.isError?!0===t.isError?f(t.name+": error"):!0===t.isComplete?f(t.name+": complete already"):!0===t.isInitialized&&f(t.name+": initialized already"):t.process()}}function p(e){return"[object Array]"==Object.prototype.toString.call(e)}return window.addEventListener("load",(function(){setTimeout((function(){n=!0,f("TDELAY -----"),u()}),5e3)}),!1),{addFile:function(e,i,n,s,a,d,h,f,u){var m=new l(e,i,n,s,a,d,h,u);!0===f?o[e]=m:r[e]=m,t[e]=m,c(m)},addDelayFile:function(e,i){var n=new l(e,i,!1,[],!1,!1,!0);n.isTimeDelay=!0,f(e+" ...  FILE! TDELAY"),r[e]=n,t[e]=n,c(n)},addFunc:function(e,n,s,l,d,h,f,u,m,p){!0===h&&(e=e+"_"+i++);var w=new a(e,n,s,l,d,f,u,p);!0===m?o[e]=w:r[e]=w,t[e]=w,c(w)},addDelayFunc:function(e,i,n){var o=new a(e,i,n,!1,[],!0,!0);o.isTimeDelay=!0,f(e+" ...  FUNCTION! TDELAY"),r[e]=o,t[e]=o,c(o)},items:t,processAll:u,setallowLoad:function(e){s=e},markLoaded:function(e){if(e&&0!==e.length){if(e in t){var i=t[e];!0===i.isComplete?f(i.name+" "+e+": error loaded duplicate"):(i.isComplete=!0,i.isInitialized=!0)}else t[e]=new d(e,!0);f("markLoaded dummyfile: "+t[e].name)}},logWhatsBlocked:function(){for(var e in t)!1!==t.hasOwnProperty(e)&&h(t[e])}}}();__ez.evt.add=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n()},__ez.evt.remove=function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]};__ez.script.add=function(e){var t=document.createElement("script");t.src=e,t.async=!0,t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)};__ez.dot={};__ez.queue.addFile('/detroitchicago/boise.js', '/detroitchicago/boise.js?gcb=195-2&cb=2', true, [], true, false, true, false);__ez.queue.addFile('/parsonsmaize/abilene.js', '/parsonsmaize/abilene.js?gcb=195-2&cb=28', true, [], true, false, true, false);</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ad_cache_level":1,"domain_id":173770,"ezcache_level":0,"ezcache_skip_code":0,"has_bad_image":0,"has_bad_words":0,"is_sitespeed":0,"lt_cache_level":0,"page_view_id":"20c8e6de-ee92-4ff4-7589-bc8d93629f85","response_size_orig":17578,"response_time_orig":294,"template_id":134,"url":"http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000","word_count":55,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqBaseReady');</script>
<script type="text/javascript">(function(){function storageAvailable(type){var storage;try{storage=window[type];var x='__storage_test__';storage.setItem(x,x);storage.removeItem(x);return true;}
catch(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==='QuotaExceededError'||e.name==='NS_ERROR_DOM_QUOTA_REACHED')&&(storage&&storage.length!==0);}}
function remove_ama_config(){if(storageAvailable('localStorage')){localStorage.removeItem("google_ama_config");}}
remove_ama_config()})()</script>
<script type="text/javascript">var ezoicTestActive = true</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ab_test_id":"mod174-c","ad_cache_level":1,"ad_count_adjustment":0,"ad_lazyload_version":0,"ad_load_version":1,"ad_location_ids":"","adx_ad_count":0,"ai_placeholder_cache_level":1,"ai_placeholder_placement_cnt":-1,"bidder_method":1,"bidder_version":3,"city":"Krasnoyarsk","country":"RU","days_since_last_visit":-1,"display_ad_count":0,"domain_id":173770,"domain_test_group":20230802,"ds_adsize_opt_id":-1,"engaged_time_visit":0,"ezcache_level":0,"ezcache_skip_code":0,"form_factor_id":1,"framework_id":1,"has_bad_image":0,"has_bad_words":0,"iab_category":"","iab_category_0":"596","is_embed":false,"is_from_recommended_pages":false,"is_return_visitor":false,"is_sitespeed":0,"last_page_load":"","last_pageview_id":"","lt_cache_level":0,"max_ads":0,"metro_code":0,"optimization_version":1,"page_ad_positions":"","page_view_count":1228,"page_view_id":"20c8e6de-ee92-4ff4-7589-bc8d93629f85","position_selection_id":0,"postal_code":"660000","pv_event_count":0,"response_size_orig":17578,"response_time_orig":294,"serverid":"i-0175a6a9c6ee54f40","state":"KYA","sub_page_ad_positions":"","t_epoch":1697691264,"template_id":134,"time_on_site_visit":0,"url":"http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000","word_count":55,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqReady');</script>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>__ez.queue.addFile('/parsonsmaize/mulvane.js', '/parsonsmaize/mulvane.js?gcb=195-2&cb=5', true, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/parsonsmaize/olathe.js', '/parsonsmaize/olathe.js?gcb=195-2&cb=20', false, ['/parsonsmaize/abilene.js','/parsonsmaize/mulvane.js'], true, false, true, false);__ez.queue.addFile('/porpoiseant/et.js', '/porpoiseant/et.js?gcb=195-2&cb=2', false, [], true, false, true, false);!function(){var e;__ez.vep=(e=[],{Add:function(i,t){__ez.dot.isDefined(i)&&__ez.dot.isValid(t)&&e.push({type:"video",video_impression_id:i,domain_id:__ez.dot.getDID(),t_epoch:__ez.dot.getEpoch(0),data:__ez.dot.dataToStr(t)})},Fire:function(){if(void 0===document.visibilityState||"prerender"!==document.visibilityState){if(__ez.dot.isDefined(e)&&e.length>0)for(;e.length>0;){var i=5;i>e.length&&(i=e.length);var t=e.splice(0,i),o=__ez.dot.getURL("/detroitchicago/grapefruit.gif")+"?orig="+(!0===__ez.template.isOrig?1:0)+"&v="+btoa(JSON.stringify(t));__ez.dot.Fire(o)}e=[]}}})}();</script><script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>!function(){function e(i){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(i)}__ez.pel=function(){var i=[];function t(t,o,d,_,n,r,a,s){if(__ez.dot.isDefined(t)&&0!=__ez.dot.isAnyDefined(t.getSlotElementId,t.ElementId)){void 0===s&&(s=!1);var p=parseInt(__ez.dot.getTargeting(t,"ap")),f=__ez.dot.getSlotIID(t),u=__ez.dot.getAdUnit(t,s),z=parseInt(__ez.dot.getTargeting(t,"compid")),g=0,c=0,l=function(i){if("undefined"==typeof _ezim_d)return!1;var t=__ez.dot.getAdUnitPath(i).split("/").pop();if("object"===("undefined"==typeof _ezim_d?"undefined":e(_ezim_d))&&_ezim_d.hasOwnProperty(t))return _ezim_d[t];for(var o in _ezim_d)if(o.split("/").pop()===t)return _ezim_d[o];return!1}(t);"object"==e(l)&&(void 0!==l.creative_id&&(c=l.creative_id),void 0!==l.line_item_id&&(g=l.line_item_id)),__ez.dot.isDefined(f,u)&&__ez.dot.isValid(o)&&("0"===f&&!0!==s||""===u||i.push({type:"impression",impression_id:f,domain_id:__ez.dot.getDID(),unit:u,t_epoch:__ez.dot.getEpoch(0),revenue:d,est_revenue:_,ad_position:p,ad_size:"",bid_floor_filled:n,bid_floor_prev:r,stat_source_id:a,country_code:__ez.dot.getCC(),pageview_id:__ez.dot.getPageviewId(),comp_id:z,line_item_id:g,creative_id:c,data:__ez.dot.dataToStr(o),is_orig:s||__ez.template.isOrig}))}}function o(){void 0!==document.visibilityState&&"prerender"===document.visibilityState||(__ez.dot.isDefined(i)&&i.length>0&&[i.filter((function(e){return e.is_orig})),i.filter((function(e){return!e.is_orig}))].forEach((function(e){for(;e.length>0;){var i=e[0].is_orig||!1,t=5;t>e.length&&(t=e.length);var o=e.splice(0,t),d=__ez.dot.getURL("/porpoiseant/army.gif")+"?orig="+(!0===i?1:0)+"&sts="+btoa(JSON.stringify(o));(void 0!==window.isAmp&&isAmp||void 0!==window.ezWp&&ezWp)&&void 0!==window._ezaq&&_ezaq.hasOwnProperty("domain_id")&&(d+="&visit_uuid="+_ezaq.visit_uuid),__ez.dot.Fire(d)}})),i=[])}return{Add:t,AddAndFire:function(e,i){t(e,i,0,0,0,0,0),o()},AddAndFireOrig:function(e,i){t(e,i,0,0,0,0,0,!0),o()},AddById:function(e,t,o,d){var _=e.split("/");if(__ez.dot.isDefined(e)&&3===_.length&&__ez.dot.isValid(t)){var n=_[0],r={type:"impression",impression_id:_[2],domain_id:__ez.dot.getDID(),unit:n,t_epoch:__ez.dot.getEpoch(0),pageview_id:__ez.dot.getPageviewId(),data:__ez.dot.dataToStr(t),is_orig:o||__ez.template.isOrig};void 0!==d&&(r.revenue=d),i.push(r)}},Fire:o,GetPixels:function(){return i}}}()}();__ez.queue.addFile('/detroitchicago/raleigh.js', '/detroitchicago/raleigh.js?gcb=195-2&cb=6', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/vista.js', '/detroitchicago/vista.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/tampa.js', '/detroitchicago/tampa.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);</script><base href=""/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="preload" as="image" href="http://www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000"/>



<meta http-equiv="expires" content="0"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<meta name="description" content="Create simply and freely UML diagrams from your browser thanks to PlantUML Web Server. Just enter a text diagram, and get the result in PNG or SVG format."/>

<style media="screen" type="text/css">
a {
    text-decoration:none;

    color:#0366d6;

}
a:hover {
    text-decoration:underline;
}

#diagram {
	text-align: center;
}

body {
	margin-left:45px;
	overflow-x: hidden;

	background: #fefefe;

}

textarea {
	width: 100%;
	height: 400px;
	resize: none;
}
#enter {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 3px 0 5px 0;
}

input[type=text],
textarea {

	background-color: #fff;

	font-family: monospace;
	width: 100%;
}

code {
	font-family: 'courier new', courier, monospace;
	letter-spacing: -1pt;
}

#diagram img {
	padding: 1px;
}

.container {
	display: flex;
	width:100%;
}

.left, .right {
  flex-shrink: 0;
}

.main {
  width:100%;
}

#left0 {
position: fixed;
height:100%;
top: 0;
bottom: 0;
left: 0;
width: 35px;
background-color: #edeff3;
border-left: 1px solid #e1e4e8;
border-right: 1px solid #e1e4e8;
padding: 0;
margin: 0;
}

.mhov img {
margin: 0;
padding: 0;
}
.mhov:hover {
filter: invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%);
}
#menuside2{
border:0;
padding:20px 0 4px 0;
margin:0
}
#menuside2 li{
list-style:none;
position:relative;
padding:0;
margin:14px 0 14px 5px;
border:0;
}
.sel2 {
border: 2px solid #edeff3;
}
.nosel2 {
border: 2px solid #edeff3;
filter: grayscale(100%) opacity(75%);
}
.sel2:hover, .nosel2:hover {
border: 2px solid #0366d6;
border-spacing: 0;
filter: grayscale(0%);
filter: contrast(200%);
filter: brightness(150%);
}


</style>

<title>PlantUML Web Server</title>
<meta property="og:title" content="PlantUML Web Server"/>
<meta property="og:description" content="The PlantUML Web Server allows you to create and edit online UML diagrams using the PlantUML Language."/>
<meta property="og:url" content="https://plantuml.com"/>
<meta property="og:site_name" content="PlantUML.com"/>
<meta property="og:image" content="https:&#34;//www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000&#34;/"/>

<meta name="twitter:image" content="https://www.plantuml.com/plantuml/sqr/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000"/>


<meta name="twitter:card" content="summary"/>

<meta name="twitter:description" content="The PlantUML Web Server allows you to create and edit online UML diagrams using the PlantUML Language."/>
<meta name="twitter:title" content="PlantUML Web Server"/>
<meta name="twitter:site" content="@PlantUML"/>
<meta name="twitter:creator" content="@PlantUML"/>

<script>window.pushMST_config={"vapidPK":"BBodn2vLFoDO5AdCfmOOzNmcUsn52kTA6JNZNYVFymzEdWHonz_bkUcsaTkPXHvNGRkRUSAxMbup-H0l2sb1h_Q","enableOverlay":true,"swPath":"/sw.js","i18n":{}};
  var pushmasterTag = document.createElement('script');
  pushmasterTag.src = "https://cdn.pushmaster-cdn.xyz/scripts/publishers/629f5e297baecc00098a271b/SDK.js";
  pushmasterTag.setAttribute('defer','');

  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(pushmasterTag, firstScriptTag);
</script>


<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-JDTK9HQ3G7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-JDTK9HQ3G7');
</script>

<script type='text/javascript'>
var ezoTemplate = 'pub_site';
var ezouid = '1';
var ezoFormfactor = '1';
</script><script data-ezscrex="false" type='text/javascript'>
var soc_app_id = '0';
var did = 173770;
var ezdomain = 'plantuml.com';
var ezoicSearchable = 1;
</script>
<link rel='canonical' href='http://plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000' />
<script data-ezscrex='false' data-pagespeed-no-defer data-cfasync='false'>
function create_ezolpl() {
	var d = new Date();
	d.setTime(d.getTime() + (365*24*60*60*1000));
	var expires = "expires="+d.toUTCString();
	__ez.ck.setByCat("ezux_lpl_173770=" + new Date().getTime() + "|" + _ezaq.page_view_id + "|" + _ezaq.is_return_visitor + "; " + expires, 3);
}
function attach_ezolpl() {
	if (document.readyState === "complete") {
		create_ezolpl();
		return;
	}
	window.addEventListener("load", create_ezolpl);
}

__ez.queue.addFunc("attach_ezolpl", "attach_ezolpl", null, false, ['/detroitchicago/boise.js'], true, false, false, false);
</script></head>
<body>


<div class="container">

<div class="left">

<!-- Ezoic - SERV -->
<span id="ezoic-pub-ad-placeholder-163"></span><!-- ezoic_pub_ad_placeholder-163-sidebar-120x600-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-160x600-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-300x1050-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-300x250v4-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-300x600-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-300x250v2-163-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-163-sidebar-120x600x2-163-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - SERV -->

</div>
<div class="left" style="width:10px;"></div>

<div class="main">

<script async="" src="https://cdn-0.plantuml.com/synchro2.min.js"></script>
<script>
function compress(s, pre) {
//UTF8
s = unescape(encodeURIComponent(s));
var arr = [];
for (var i = 0; i < s.length; i++) {
	arr.push(s.charCodeAt(i));
}
var compressor = new Zopfli.RawDeflate(arr);
var compressed = compressor.compress();
dest = "//www.plantuml.com/plantuml" + pre + encode64_(compressed);
window.location.href = dest;
}
function backto(s) {
	var i = s.lastIndexOf("/");
	if (i!=-1) s = s.substring(i+1);

	dest = "//www.plantuml.com/plantuml" + "/uml/"+s;

	window.location.href = dest;
}
</script>

<textarea name="text" id="inflated" spellcheck="false" onkeyup="sendCode()">@startuml
Bob -&gt; Alice : hello
@enduml</textarea>

<div id="enter">

<div style="flex-grow:10;">
<input title="You can enter here a previously generated URL" name="url" id="url" type="text" value="//www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" onkeyup="if (event.keyCode == 13) { backto(GID(&#39;url&#39;).value); return false; }"/>
</div>

<div>
<button onclick="backto(GID(&#39;url&#39;).value)">Decode URL</button>
</div>

</div><!-- enter -->

<style>
#irefresh {
cursor: pointer;
}
#irefresh:hover {

filter: invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%);

}
.ablue {

filter: invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%);

}
.agray {
filter: invert(94%) sepia(0%) saturate(7471%) hue-rotate(37deg) brightness(91%) contrast(87%);
}
.picon {
cursor: pointer;
vertical-align: top;
margin-right: 10px;

}
.picon:hover {

filter: invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%);

}

</style>

<img style="margin-right:10px;" id="irefresh" title="Autorefresh" onclick="chauto()" class="ablue" src="http://www.plantuml.com/plantuml/svgrepo-refresh.svg" width="20" height="20"/>



<button style="margin-right:15px; vertical-align:top;" onclick="compress(GID(&#39;inflated&#39;).value,&#39;/uml/&#39;)">Submit</button>
<img title="Dark mode" onclick="compress(GID(&#39;inflated&#39;).value,&#39;/duml/&#39;)" class="picon" src="http://www.plantuml.com/plantuml/svgrepo-uxwing-light-mode-toggle.svg" height="20"/>
<img title="Change layout" onclick="compress(GID(&#39;inflated&#39;).value,&#39;/umla/&#39;)" class="picon" src="http://www.plantuml.com/plantuml/svgrepo-change.svg" width="20" height="20"/>




<img id="ewindow" title="Extract window" onclick="dual()" class="picon" src="http://www.plantuml.com/plantuml/svgrepo-dock-panel.svg" width="20" height="20"/>

<script>
var win;
function childOpen() {
if (win && win.closed==false) return true;
return false;
}

function dual(t) {
if (childOpen()) {
win.close();
GID('ewindow').className = "picon";
GID('inflated').style.height="400px";
GID('cde').style.display = "flex";
GID('hlong').style.display = "none";
return;
}
GID('ewindow').className = "ablue";
GID('cde').style.display = "none";
GID('hlong').style.display = "block";
h=window.innerHeight-220;
GID('inflated').style.height=""+h+"px";
if (GID('irefresh').className == "agray") chauto();

if (lw>0)
option = "width="+lw+",height="+lh+",left="+lx+",top="+ly+",toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no";
else{
w = 800;
h = Math.max(500,window.top.outerHeight/2);
x = window.screenLeft;
y = window.top.outerHeight/2 - h/2;
option = "width="+w+",height="+h+",left="+x+",top="+y+",toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no";
}

win = window.open('/plantuml/dual.html', '', option);

}

</script>



<select style="vertical-align:top;" name="stheme" id="stheme" onchange="doSomething(this.selectedIndex);">
<option value="nul"></option>
<option value="amiga">amiga</option>
<option value="aws-orange">aws-orange</option>
<option value="black-knight">black-knight</option>
<option value="bluegray">bluegray</option>
<option value="blueprint">blueprint</option>
<option value="cerulean-outline">cerulean-outline</option>
<option value="cerulean">cerulean</option>
<option value="crt-amber">crt-amber</option>
<option value="crt-green">crt-green</option>
<option value="cyborg-outline">cyborg-outline</option>
<option value="cyborg">cyborg</option>
<option value="hacker">hacker</option>
<option value="lightgray">lightgray</option>
<option value="mars">mars</option>
<option value="materia-outline">materia-outline</option>
<option value="materia">materia</option>
<option value="metal">metal</option>
<option value="mimeograph">mimeograph</option>
<option value="minty">minty</option>
<option value="plain">plain</option>
<option value="reddress-darkblue">reddress-darkblue</option>
<option value="reddress-darkgreen">reddress-darkgreen</option>
<option value="reddress-darkorange">reddress-darkorange</option>
<option value="reddress-darkred">reddress-darkred</option>
<option value="reddress-lightblue">reddress-lightblue</option>
<option value="reddress-lightgreen">reddress-lightgreen</option>
<option value="reddress-lightorange">reddress-lightorange</option>
<option value="reddress-lightred">reddress-lightred</option>
<option value="sandstone">sandstone</option>
<option value="silver">silver</option>
<option value="sketchy-outline">sketchy-outline</option>
<option value="sketchy">sketchy</option>
<option value="spacelab">spacelab</option>
<option value="spacelab-white">spacelab-white</option>
<option value="superhero-outline">superhero-outline</option>
<option value="superhero">superhero</option>
<option value="toy">toy</option>
<option value="united">united</option>
<option value="vibrant">vibrant</option>
</select>

 

 

 
<a id="urljs" style="vertical-align:top;" href="https://plantuml.github.io/plantuml-core/raw.html?SyfFKj2rKt3CoKnELR1Io4ZDoSa70000">Pure Javascript<img src="https://cdn-0.plantuml.com/icon_new.png" height="14px"/></a> 
<a id="urlpng" style="vertical-align:top;" href="http://www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000">PNG</a> 
<a id="urlsvg" style="vertical-align:top;" href="http://www.plantuml.com/plantuml/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000">SVG</a> 
<a id="urltxt" style="vertical-align:top;" href="http://www.plantuml.com/plantuml/txt/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000">ASCII Art</a>



<div style="float:right;">
<a href="https://discord.gg/sXhzexAQGh" style="text-decoration: none;">
<img src="https://img.shields.io/discord/1083727021328306236?color=5865F2&amp;logo=discord&amp;logoColor=white" alt="Discord server"/>
</a>
 
<img src="https://img.shields.io/endpoint?url=https://www.plantuml.com/plantuml/badge"/>
 
<img src="https://img.shields.io/endpoint?url=https://www.plantuml.com/plantuml/rate"/>
 
<img src="https://img.shields.io/endpoint?url=https://www.plantuml.com/plantuml/rate?peak"/>
</div>

<script>
function splitLines(t) { return t.split(/\r\n|\r|\n/); }

function doSomething(num) {
	var src = document.getElementById('theimg').src;
		
	
	const regex = /\/png\/theme\/[-_a-zA_Z0-9\/]+\//;
	src = src.replace(regex, '/png/');
	

	var tname;
	if (num>0) {
		tname = document.getElementById('stheme').options[num].text;
		
		src = src.replace('/png/', '/png/theme/' + tname + '/');
		
	}
	document.getElementById('theimg').src = src;
	
	tab = splitLines(document.getElementById('inflated').value);
	res = "";
	for (const ss of tab) {
		if (ss.startsWith("!theme ") == false) res = res + ss + "\r\n";
		if (num>0 && ss.startsWith("@start")) res = res + "!theme " + tname + "\r\n";
	}
	res = res.substring(0, res.length - 2);
	document.getElementById('inflated').value = res;

}
</script>


<script>
var last = Date.now();
var ltext = "";
var lx=0,ly=0,lw=0,lh=0;

function sendCode(){
last = Date.now();
}

function watchdog() {
if (childOpen()){
win.document.getElementById('theimg').src = GID('theimg').src;
lx=win.screenX;
ly=win.screenY;
lh=win.outerHeight;
lw=win.outerWidth;
}else{
GID('inflated').style.height="400px";
GID('ewindow').className = "picon";
GID('cde').style.display = "flex";
GID('hlong').style.display = "none";
}
var diff = Date.now() - last
var current = GID("inflated").value;
if (diff > 1000 && current != ltext) {
  ltext = current;
  comp2 = compress2(current);
  tmp = GID('theimg').src;

  tmp = tmp.substring(0, tmp.indexOf('/png/')) + "/png/" +comp2;

  GID('theimg').src = tmp;
  if (childOpen())
	  win.document.getElementById('theimg').src = tmp;
  GID('urlpng').href = tmp;
  tmp = GID('urlsvg').href;

  GID('urljs').href = "https://plantuml.github.io/plantuml-core/raw.html?" + comp2;
  tmp = tmp.substring(0, tmp.indexOf('/svg/')) + "/svg/" +comp2;

  GID('urlsvg').href = tmp;
  tmp = GID('urltxt').href;
  tmp = tmp.substring(0, tmp.indexOf('/txt/')) + "/txt/" +comp2;
  GID('urltxt').href = tmp;
  tmp = GID('url').value;
  
  tmp = tmp.substring(0, tmp.indexOf('/png/')) + "/png/" +comp2;
  
  GID('url').value = tmp;

}
}

function compress2(s) {
	//UTF8
	s = unescape(encodeURIComponent(s));
	var arr = [];
	for (var i = 0; i < s.length; i++)
		arr.push(s.charCodeAt(i));	
	var compressor = new Zopfli.RawDeflate(arr);
	var compressed = compressor.compress();
	return encode64_(compressed);
}

function chauto() {
if (GID('irefresh').className == "agray") {
GID('irefresh').className = "ablue";
myTimer = setInterval("watchdog()", 900);
} else {
GID('irefresh').className = "agray";
clearInterval(myTimer);
}
}
</script>


<div style="clear:both"></div>

<style>
#hlong {
display:none;
height:100px;
}
</style>
<div id="hlong">
<!-- Ezoic - hlong - bottom_of_page -->
<span id="ezoic-pub-ad-placeholder-645"></span><!-- ezoic_pub_ad_placeholder-645-bottom_of_page-468x60-645-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-645-bottom_of_page-728x90-645-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-645-bottom_of_page-970x90-645-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - hlong - bottom_of_page -->
</div><!-- hlong -->

<style>
#cde {
  display: flex;
  justify-content: space-between;
  
}
</style>

<div id="cde">
<div>
<!-- Ezoic - io_v1 - mid_content -->
<span id="ezoic-pub-ad-placeholder-641"></span><!-- ezoic_pub_ad_placeholder-641-under_page_title-120x240-641-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-641-under_page_title-125x125-641-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - io_v1 - mid_content -->
</div>

<div id="diagram">
    
    <img loading="lazy" id="theimg" src="http://cdn-0.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" style="max-width: 100%; height: auto;" alt="PlantUML diagram"/>
    
</div>

<div>
<!-- Ezoic - io_v2 - long_content -->
<span id="ezoic-pub-ad-placeholder-642"></span><!-- ezoic_pub_ad_placeholder-642-under_page_title-120x240-642-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-642-under_page_title-125x125-642-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - io_v2 - long_content -->
</div>

</div><!-- cde -->





</div><!-- main -->

<div class="right" style="width:10px;"></div>

<div class="right">

<!-- Ezoic - SERV0 -->
<span id="ezoic-pub-ad-placeholder-169"></span><!-- ezoic_pub_ad_placeholder-169-sidebar-120x600-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-160x600-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-300x1050-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-300x250v4-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-300x600-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-300x250v2-169-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-169-sidebar-120x600x2-169-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - SERV0 -->

</div><!-- right -->


</div><!-- container -->


<div id="left0">
<ul id="menuside2">

<li><a href="index.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-house.svg" width="16" height="16" title="Home"/></a></li>
<li><a href="news.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-text-news.svg" width="16" height="16" title="What&#39;s New ?"/></a></li>
<li><a href="starting.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-rocket-3-start.svg" width="16" height="16" title="Getting Started"/></a></li>
<li><a href="https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-server.svg" width="16" height="16" title="Online Server"/></a></li>
<li><a href="running.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-play.svg" width="16" height="16" title="Running"/></a></li>
<li><a href="faq.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-forum.svg" width="16" height="16" title="F.A.Q."/></a></li>
<li><a href="download.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-add-to-online-cart.svg" width="16" height="16" title="Download"/></a></li>
<li><a href="qa.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-forum-message.svg" width="16" height="16" title="Forum"/></a></li>
<li><a href="theme.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-palette-fill.svg" width="16" height="16" title="Theme"/></a></li>
<li><a href="preprocessing.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-cpu.svg" width="16" height="16" title="Preprocessing"/></a></li>
<li><a href="stdlib.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-books-library.svg" width="16" height="16" title="Standard Library"/></a></li>
<li><a href="https://crashedmind.github.io/PlantUMLHitchhikersGuide" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-signpost-fill.svg" width="16" height="16" title="Hitchhiker&#39;s Guide"/></a></li>
<li><a href="guide.html" class="mhov"><img src="https://cdn-0.plantuml.com/svgrepo-library.svg" width="16" height="16" title="PDF Guide"/></a></li>

</ul>
</div>

<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=9301480; 
var sc_invisible=1; 
var sc_security="6eff847c"; 
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="web analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/9301480/0/6eff847c/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->

<script>
var myTimer = setInterval("watchdog()", 900);
</script>



<script type="text/javascript">
				var __inScopeForCCPA = false;
		function __uspapi(command, version, callback) {
			var response = null;
			var successs = false;
			if (command === "getUSPData" && version === 1) {
				var uspString = "1"; // Version
				if (__inScopeForCCPA) {
					uspString += "N"; // Has Explicit Notice for Opt Out been provided (ex footer or minor consent modal)
					var result;
					var consentCookie = (result = new RegExp('(?:^|; )ezoccpaconsent=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
					if (consentCookie === "nonconsent") {
						uspString += "Y";
					}
					else {
						uspString += "N";
					}
					uspString += "N" // Is pub a signatory to the IAB Limited Service Provider Agreement (http://www.iabprivacy.com/)
				}
				else {
					uspString += "---";
				}
				response = {
					uspString: uspString,
					version: 1
				};
				success = true;
			}
			return callback(response, success);
		};
		function __receiveUspapiMessage(event) {
			if (event.data.hasOwnProperty('__uspapiCall')) {
				__uspapi('getUSPData', 1, function(uspData, success) {
					event.source.postMessage({
						__uspapiReturn: {
							returnValue: uspData,
							success: success,
							callId: event.data.__uspapiCall.callId
						}
					},
					event.origin);
				});
			}
			return null;
		};
		window.addEventListener("message", __receiveUspapiMessage, false);
</script>
<script>__ez.queue.addFile('/tardisrocinante/vitals.js', '/tardisrocinante/vitals.js?gcb=2&cb=3', false, ['/parsonsmaize/mulvane.js'], true, false, true, false);</script>
<script>var _audins_dom="plantuml_com",_audins_did=173770;__ez.queue.addDelayFunc("audins.js","__ez.script.add", "//go.ezodn.com/detroitchicago/audins.js?cb=195-2");</script><noscript><div style="display:none;"><img src="http://pixel.quantserve.com/pixel/p-31iz6hfFutd16.gif?labels=Domain.plantuml_com,DomainId.173770" border="0" height="1" width="1" alt="Quantcast"/></div></noscript>
<script>__ez.queue.addFile('/beardeddragon/drake.js', '/beardeddragon/drake.js?gcb=2&cb=4', false, [], true, false, true, false);</script>
<script type="text/javascript" style='display:none;'>var __ez_dims = (function() {
		var setCookie = function( name, content, expiry ) {
			return document.cookie = name+'='+content+((expiry)?';expires='+(new Date(Math.floor(new Date().getTime()+expiry*1000)).toUTCString()):'')+';path=/';
		};
		var ffid = 1;
		var oh = window.screen.height;
		var ow = window.screen.width;
		var h = ffid === 1 ? oh : (oh > ow) ? oh : ow;
		var w = ffid === 1 ? ow : (oh > ow) ? ow : oh;
		var uh = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
		var uw = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
		setCookie('ezds', encodeURIComponent('ffid='+ffid+',w='+w+',h='+h), (31536e3*7));
		setCookie('ezohw', encodeURIComponent('w='+uw+',h='+uh), (31536e3*7));
	})();</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/parsonsmaize/chanute.js', '/parsonsmaize/chanute.js?a=a&cb=7&dcb=195-2&shcb=34', true, ['/parsonsmaize/mulvane.js'], true, false, false, false);</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/porpoiseant/jellyfish.js', '/porpoiseant/jellyfish.js?a=a&cb=10&dcb=195-2&shcb=34', false, [], true, false, false, false);</script></body></html>